<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>车牌管理系统--注册页面</title>
    <script th:src="@{/elementui/vue2-7.js}"></script>
    <script th:src="@{/elementui/index.js}"></script>
    <link rel="stylesheet" th:href="@{/elementui/index.css}"/>
    <link rel="stylesheet" th:href="@{/css/register.css}"/>
</head>
<body>

<div id="app">
    <div id="admin">
        <div class="pos" v-loading="loading">
            <h1 class="adminh1">用户注册</h1>
            <el-form
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="账号：" prop="account">
                    <el-input
                            prefix-icon="el-icon-user"
                            style="width: 250px"
                            placeholder="请输入账号"
                            type="text"
                            v-model="ruleForm.account"
                            autocomplete="off"
                            name="account"
                            maxlength="10"
                            show-word-limit
                    ></el-input>
                </el-form-item>
                <el-form-item label="密 码：" prop="password">
                    <el-input
                            prefix-icon="el-icon-key"
                            style="width: 250px"
                            placeholder="请输入密码"
                            show-password
                            type="password"
                            v-model="ruleForm.password"
                            autocomplete="off"
                            name="password"
                            maxlength="15"
                    ></el-input>
                </el-form-item>
                <el-form-item label="性 别：" prop="sex">
                        <el-radio
                                v-model="ruleForm.sex"
                                label="男" border
                                size="medium"
                                name="sex"
                                value="男"
                                autocomplete="off">男</el-radio>
                        <el-radio
                                v-model="ruleForm.sex"
                                label="女" border
                                size="medium"
                                name="sex"
                                value="女"
                                autocomplete="off">女</el-radio>
                </el-form-item>
                <el-form-item label="姓 名：" prop="name">
                    <el-input
                            prefix-icon="el-icon-key"
                            style="width: 250px"
                            placeholder="请输入您的真实姓名"
                            type="text"
                            v-model="ruleForm.name"
                            autocomplete="off"
                            name="name"
                            maxlength="10"
                    ></el-input>
                </el-form-item>
                <el-form-item label="年 龄：" prop="age">
                    <el-input
                            prefix-icon="el-icon-key"
                            style="width: 250px"
                            placeholder="请输入密码"
                            type="number"
                            v-model="ruleForm.age"
                            autocomplete="off"
                            name="age"
                            maxlength="3"
                    ></el-input>
                </el-form-item>
                <el-form-item label="地 址：" prop="address">
                    <el-input
                            prefix-icon="el-icon-key"
                            style="width: 250px"
                            placeholder="请输入家庭住址"
                            type="text"
                            v-model="ruleForm.address"
                            autocomplete="off"
                            name="address"
                            maxlength="15"
                    ></el-input>
                </el-form-item>
                <el-form-item label="电 话：" prop="number">
                    <el-input
                            prefix-icon="el-icon-key"
                            style="width: 250px"
                            placeholder="请输入联系电话"
                            type="number"
                            v-model="ruleForm.number"
                            autocomplete="off"
                            name="number"
                            maxlength="15"
                    ></el-input>
                </el-form-item>
                <el-form-item label="身 份 证 号：" prop="identifyID">
                    <el-input
                            prefix-icon="el-icon-key"
                            style="width: 250px"
                            placeholder="请输入您的身份证"
                            type="text"
                            v-model="ruleForm.identifyID"
                            autocomplete="off"
                            name="identifyID"
                            maxlength="20"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" id="login" @click="register('ruleForm')">注册</el-button>
                    <el-button type="primary" id="reset" @click="resetForm('ruleForm')">清空</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>


</body>
</html>

<script th:src="@{/js/axios-0.18.0.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script>
    var vue = new Vue({
        el: "#app",
        ruleForm: {},
        data(){
            var validatePassAc = (rule, value, callback) => {
                const acReg = /^[A-Za-z0-9]+$/
                if (value === "") {
                    callback(new Error("请输入账号"));
                } else if(acReg.test(value) === false ){
                    callback(new Error("只能输入字母和数字"));
                } else if (value.length < 3 || value.length > 15) {
                    callback(new Error("长度必须在3-15之内!"));
                } else {
                    if (this.ruleForm.password !== "") {
                        this.$refs.ruleForm.validateField("password");
                    }
                    callback();
                }
            };
            var validatePassPwd = (rule, value, callback) => {
                const acReg = /^[A-Za-z0-9]+$/
                if (value === "") {
                    callback(new Error("请输入密码"));
                } else if(acReg.test(value) === false ){
                    callback(new Error("只能输入字母和数字"));
                }else if (value.length < 6 || value.length > 15) {
                    callback(new Error("长度必须在6-15之内!"));
                } else {
                    callback();
                }
            };
            var validatePassSex = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请选择性别"));
                } else {
                    callback();
                }
            };
            var validatePassName = (rule, value, callback) => {
                const nameReg = /^[\u4e00-\u9fa5]{0,}$/g
                if (value === "") {
                    callback(new Error("请输入真实姓名"));
                } else if(nameReg.test(value) === false ){
                    callback(new Error("只能输入中文"));
                } else if (value.length <2 || value.length > 5) {
                    callback(new Error("长度必须在2-5之内!"));
                } else {
                    callback();
                }
            };
            var validatePassAge = (rule, value, callback) => {
                const ageReg = /^[1-9]\d*$/
                if (value === "") {
                    callback(new Error("请输入年龄"));
                }else if (ageReg.test(value) === false ){
                    callback(new Error("应为正整数"));
                }  else if(value.length !== 2){
                    callback(new Error("年龄长度不合法"))
                }else {
                    callback();
                }
            };
            var validatePassArr = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入住址"));
                }else if (value.length < 6 || value.length > 15) {
                    callback(new Error("长度必须在6-15之内!"));
                } else {
                    callback();
                }
            };
            var validatePassNum = (rule, value, callback) => {
                const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
                if (value === "") {
                    callback(new Error("请输入电话号"));
                } else if (phoneReg.test(value) === false) {
                    callback(new Error('电话号码格式不正确'))
                } else if (value.length !== 11) {
                    callback(new Error("长度为11位!"));
                } else {
                    callback();
                }
            };
            var validatePassIde = (rule, value, callback) => {
                const identifyReg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                const  rega = /^[A-Za-z0-9]+$/
                if (value === "") {
                    callback(new Error("请输入身份证号码"));
                } else if (rega.test(value) === false ){
                    callback(new Error('只能输入字母或数字'))
                } else if(identifyReg.test(value) === false){
                    callback(new Error('身份证号格式不正确'))
                } else {
                    callback();
                }
            };
            return {
                loading: false,
                ruleForm: {
                    account: "",
                    password: "",
                    sex: "",
                    name: "",
                    age: "",
                    address: "",
                    number: "",
                    identifyID: "",
                    identify: "用户",
                },
                rules: {
                    account: [{validator: validatePassAc, trigger: "blur"}],
                    password: [{validator: validatePassPwd, trigger: "blur"}],
                    sex: [{validator: validatePassSex, trigger: "blur"}],
                    name: [{validator: validatePassName, trigger: "blur"}],
                    age: [{validator: validatePassAge, trigger: "blur"}],
                    address: [{validator: validatePassArr, trigger: "blur"}],
                    number: [{validator: validatePassNum, trigger: "blur"}],
                    identifyID: [{validator: validatePassIde, trigger: "blur"}],
                },
            };
        },
        methods: {
            register(ruleForm){
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        // console.log(this.ruleForm);
                        axios.post("/user/register",this.ruleForm).then( async (response) => {
                            if (response.data.code === 20011) {
                                this.loading = true;
                                console.log("注册成功!!!");
                                this.$message.success(response.data.msg);
                                setTimeout(() => {
                                    this.loading = false;
                                }, 1000);
                                await this.sleep(1000);
                                window.location.href = "/index";
                            } else {
                                this.loading = true;
                                console.log("注册失败!!!");
                                this.$message.info(response.data.msg);
                                setTimeout(() => {
                                    this.loading = false;
                                }, 1000);
                                await this.sleep(1000);
                            }
                        });
                    } else {
                        this.$message.info("请输入检查填写的信息是否正确！");
                        console.log("error submit!!");
                        return false;
                    }
                })
            },

            //清空方法
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //睡眠
            sleep(time) {
                return new Promise(resolve => setTimeout(resolve, time));
            },
        },

    })
</script>